<!doctype html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Samples players for dash.js</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style>
            .container {
                min-width: 1200px;
            }
            .nav-tabs {
                overflow-x: auto;
                overflow-y: hidden;
                display: flex;
            }

            .tab-pane {
                display: flex;
                flex-direction: row;
                align-items: stretch;
                justify-content: flex-start;
                flex-wrap: wrap;
            }

            .tab-content>.active {
                display: flex !important;
            }

            .card {
                align-self: auto;
                position: relative;
                flex-grow: 1;
            }

        </style>
    </head>
    <body class="bg-light">
        <div class="container">
            <div class="pt-5 pb-3 text-center">
                <img class="d-block mx-auto mb-4" src="https://cloud.githubusercontent.com/assets/2762250/7824984/985c3e76-03bc-11e5-807b-1402bde4fe56.png" width="300">
                <h2>Dash.js Samples</h2>
                <p class="lead"> Dash.js is a framework which enables the creation of many different MSE/EME players. This page provides a starting point to examine all the various samples available. Many samples ship with this code base, others are hosted elsewhere.</p>
            </div>

            <p class="pb-3 text-center">
                <strong>
                    Reference Player:
                </strong>
                The <a target="_blank" href="dash-if-reference-player/index.html">DASH IF Reference player</a>. The <a href="http://dashif.org">DASH Industry Forum</a> is
                a non-profit industry forum formed to catalyze the adoption of MPEG-DASH. They define common versions of DASH which other standards bodies (such as DVB and HbbTV) then formalize.
                This player is intended to provide a reference implementation. Note the player is just a UI on top of the same framework used in all these samples. In using dash.js you are inheriting
                much of the latest thinking of the DASH ecosystem.
            </p>

            <ul class="nav nav-tabs" id="tabs" role="tablist">
            </ul>
            <div class="tab-content mb-5" id="content">
            </div>

            <div style="display: none">
                <div id="card-sample" class="card">
                    <div class="card-body">
                        <a>
                            <h5 class="card-title">Card title</h5>
                        </a>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
            </div>
            <p class="py-3">
                Dash.js also provides examples of how to integrate it with different module bundler and devices. Check <a target="_blank" href="modules/typescript/index.html">Typescript</a>,
                <a target="_blank" href="modules/webpack/index.html">Webpack</a> or <a target="_blank" href="chromecast/index.html">Chromecast</a> integrations.
            </p>
        </div>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js"  crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

        <script>
            var sampleData = [];
            $(document).ready(function() {
                $.getJSON("samples.json", function(json) {
                    sampleData = json;
                    drawSampleData();
                });
            });

            function drawSampleData() {
                sampleData.forEach(function(section){
                    drawSection(section);
                    drawSectionSamples(section);
                });
            }

            function drawSection(section) {
                var $tab = $('<li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" ></a></li>');
                var $link = $tab.find('a');
                $link.attr('id', nameToId(section.section) + '-tab');
                $link.attr('aria-controls', nameToId(section.section));
                $link.attr('href', '#' + nameToId(section.section));
                $link.html(section.section);
                if (section.active) {
                    $link.addClass('active');
                }
                $('#tabs').append($tab);
            }

            function drawSectionSamples(section) {
                var $tabContent = $('<div class="tab-pane fade" role="tabpanel"></div>');
                $tabContent.attr('id', nameToId(section.section));
                $tabContent.attr('aria-labelledby', nameToId(section.section) + '-tab');
                $('#content').append($tabContent);

                section.samples.forEach(function(sample) {
                    var $card = $('#card-sample').clone(true);
                    $card.attr('id', '');
                    $card.find('h5').text(sample.title);
                    $card.find('p').html(sample.description);
                    $card.find('a').attr('href', sample.href);
                    $card.css('width', sample.width || '18rem');
                    $tabContent.append($card);
                });

                if (section.active) {
                    $tabContent.addClass('active show');
                }
            }

            function nameToId(name) {
                return name.replace(/[^a-z0-9]/gmi, "");
            }
        </script>
    </body>
</html>